<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include '../include/baselink.ftl'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>

<body class="dashboard-page">
<#include '../include/skin-toolbox.ftl'>
<#--<!-- Start: Main &ndash;&gt;-->
    <div id="main">
<#include '../include/header.ftl'>
<#include '../include/sidebar.ftl'>
    <!-- Start: Content-Wrapper -->
    <section id="content_wrapper">
        <!-- Start: Topbar -->
        <header id="topbar" class="alt">
            <div class="topbar-left">
                <ol class="breadcrumb">
                    <li class="crumb-active">
                        <a href="<@s.url '/'/>">控制台</a>
                    </li>
                    <li class="crumb-icon">
                        <a href="<@s.url '/'/>">
                            <span class="glyphicon glyphicon-home"></span>
                        </a>
                    </li>
                    <li class="crumb-link">
                       系统管理
                    </li>
                    <li class="crumb-trail">角色管理</li>
                </ol>
            </div>
        </header>
    <#--<!-- End: Topbar &ndash;&gt;-->
    <#--<!-- Begin: Content &ndash;&gt;-->
        <section id="content" class="table-layout animated fadeIn">
            <div class="col-md-12">
                <div class="panel panel-visible" id="spy2">
                    <div class="panel-heading">

                        <span class="panel-title">
                            <span class="fa fa-table"></span>角色列表
                        </span>

                        <div class="panel-controls">
                            <a href="#" class="panel-control-color"></a>
                            <a href="#" class="panel-control-collapse"></a>
                            <a href="#" class="panel-control-fullscreen"></a>
                        </div>

                    </div>
                    <div class="panel-body pn">
                        <div class="well well-sm">
                            <a class="btn btn-info btn-sm" type="button"  v-on:click="add" data-toggle="modal" data-target="#saveModal">
                                <i class="fa fa-plus"> 添加角色</i>
                            </a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover" id="datatable2" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>角色名称</th>
                                        <th>描述信息</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in roles">
                                        <td>{{ item.id }}</td>
                                        <td>{{ item.name }}</td>
                                        <td>{{ item.text }}</td>
                                        <td>
                                            <a class="btn btn-sm btn-primary" v-on:click="update(item.id)" data-toggle="modal" data-target="#saveModal">编辑角色</a>
                                            <a class="btn btn-sm btn-primary" v-on:click="deleted(item.id)">删除角色</a>
                                            <a class="btn btn-sm btn-primary" data-toggle="modal" data-target="#menuModel" v-on:click="editMenu(item.id)">设置权限</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    <#--<!-- End: Content &ndash;&gt;-->
    <#--<#include '../include/footer.ftl' />-->
    <#--</section>-->
        <!-- End: Content-Wrapper -->
    </section>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="saveModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 v-if="operatingState == 'add'" class="modal-title" id="myModalLabel">添加角色信息</h4>
                    <h4 v-else class="modal-title" id="myModalLabel">修改角色信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-lg-3">角色名称:</label>
                            <div>
                                <div class="bs-component col-lg-8">
                                    <input type="text" class="form-control" placeholder="填写角色名称" v-model="operatingModal.name"/>

                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">角色描述:</label>
                            <div>
                                <div class="bs-component col-lg-8">
                                    <input type="text" class="form-control" placeholder="填写角色描述" v-model="operatingModal.text"/>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="closeButton" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="save">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="menuModel" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改权限</h4>

                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" style="overflow:auto;height: 500px;">

                        <div id="jstree">

                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button id="menuModelClose" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="saveRoleMenu()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<!-- Datatables -->

<#include '../include/footer_js.ftl'/>

<script>
    var menuTree;

    function queryTree() {
        $.ajax({
            type: "POST",
            url: contentPath + "/api/view/sys/menu/allchilds/0",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
            },
            dataType: "json",
            data: null,
            success: function (data) {
                $('#jstree').jstree({
                    core: {
                        data:data.data
                    },
                    plugins: ["checkbox"]
                });

                menuTree = $('#jstree').jstree(true);
            },
            error:function (data) {
                sweetAlert(data.responseJSON.msg);
            }
        });
    }

    var app = new Vue({
        el: '#main',
        data: {
            roles: [],
            operatingState:"add",
            operatingModal:{
                id:null,
                name:null,
                text:null
            },
            edit:{
                roleId:null
            }
        },
        created: function () {
            queryTree();
            this.query();
        },
        methods: {
            add:function () {
                this.operatingState = "add";
                this.operatingModal = {
                    id: null,
                    name: null,
                    text: null
                };
            },
            update:function(roleId){
                this.operatingState = "update";
                this.$http.post(contentPath+"/api/view/sys/role/detail/" + roleId)
                        .then(function (response) {
                            this.operatingModal = response.data.data;
                        },function(error){
                            swal(error.body.msg);
                        });
            },
            query: function () {
                this.$http.post(contentPath+"/api/view/sys/role/listall")
                        .then(function (response) {
                            if(response.data.retcode == 2000000){
                                this.roles= response.data.data;
                            }else{
                                swal(response.data.message);
                            }
                        },function(error){
                            swal(error.body.msg);
                        });
            },
            save:function () {
                $("#closeButton").click();

                var path = contentPath + "/api/view/sys/role/save";
                this.$http.post(path, this.operatingModal)
                        .then(function (response) {
                            if(response.data.retcode == 2000000){
                                this.query();
                                swal("保存成功");
                            }else{
                                swal(response.data.message);
                            }
                        },function(error){
                            swal(error.body.msg);
                        });
            },
            deleted:function (id) {
                var vue = this;
                swal(
                        {
                            title: "确定删除该角色？",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function () {
                            vue.$http.post(contentPath + "/api/view/sys/role/delete/" + id)
                                    .then(function (response) {
                                        if(response.data.retcode == 2000000){
                                            this.query();
                                            swal("删除成功");
                                        }else{
                                            swal(response.data.message);
                                        }
                                    },function(error){
                                        swal(error.body.msg);
                                    });
                        }
                );
            },
            clean:function () {
              menuTree.uncheck_all();
            },
            editMenu:function (id) {
                this.clean();
                this.edit.roleId = id;
                this.$http.post(contentPath + "/api/view/sys/menu/roleId/"+id)
                        .then(function (response) {
                            var menuIds = response.data.data;
                            $.each(menuIds,function (i,e) {
                                var menu = menuTree.get_node(e);
                                menuTree.check_node(menu);
                            });
                            menuTree.open_all();
                        },function(error){
                            swal(error.body.msg);
                        });
            },
            saveRoleMenu:function () {
                $('#menuModelClose').click();

                var menuIds = menuTree.get_selected();
                var req ={
                    roleId:this.edit.roleId,
                    menuIds:menuIds
                };
                this.$http.post(contentPath + "/api/view/sys/role/permission/save",req)
                        .then(function (response) {
                            if(response.data.retcode == 2000000){
                                swal("保存成功");
                            }else{
                                swal(response.data.message);
                            }

                        },function(error){
                            swal(error.body.msg);
                        });
            }
        }
    });

</script>

</body>

</html>
